import { Vector3 } from '@babylonjs/core/Maths/math.vector';
import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
import { Stage } from 'babylon-lib/base/stage';
import { CreateUINode, UINode } from 'babylon-lib/gui/base/ui-node';
import { RenderOrder } from 'babylon-lib/misc/render-order';
import * as Data from '../data/data';
import { ANCHOR } from 'babylon-lib/gui/control/abstract-base';
import { CreateUIButton, UIButton } from 'babylon-lib/gui/control/ui-button';
import { CharacterManager } from '../stages/default-stage-components/character/character-manager';
import { RawAssetsUrl } from '../raw-assets-info';
import { ShellManager } from '../stages/default-stage-components/weapon/shell-manager';


class ControlPanel {

    private static fireButton: UIButton;
    private static targetButton: UIButton;
    private static aimButton: UIButton;

    public static node: UINode;

    public static initialize(stage: Stage): void {
        this.initializeNode(stage);
        this.bindData();
    }

    private static bindData(): void {
        const _this = ControlPanel;
        Data.controlPanelDisplay.onChange((o, n) => {
            _this.node.display = n;
        });
        Data.reloading.onChange((o, n) => {
            _this.node.display = (!n) && Data.controlPanelDisplay.value;
        });
    }

    private static initializeNode(stage: Stage): void {
        const textureTarget = stage.loader(stage.mainScene).getTextureTaskInfo(RawAssetsUrl.textureTarget)?.texture!;
        const textureExplode = stage.loader(stage.mainScene).getTextureTaskInfo(RawAssetsUrl.textureExplode)?.texture!;
        const node = CreateUINode('control-panel-node', stage.mainScene,
            {
                anchor: new Vector3(0.5, 1, 0),
                billboard: TransformNode.BILLBOARDMODE_Y,
                display: false,
                lockToCamera: true,
                xrRatio: { x: 1, y: 1.3 }
            },
            [
                this.fireButton = CreateUIButton('control-panel-fire-button', stage.mainScene, {
                    anchor: ANCHOR.CENTER_BOTTOM,
                    text: 'O',
                    fontColor: '#ffffff',
                    background: '#610b00',
                    fontSize: 40,
                    width: 1,
                    height: 1,
                    top: 0.01,
                    cornerRadius: 5,
                    alpha: 1,
                    left: -0.11,
                    renderingGroupId: RenderOrder.id(Data.orders.ui),
                }, () => {
                    ShellManager.fire();
                }),
                this.targetButton = CreateUIButton('control-panel-target-button', stage.mainScene, {
                    anchor: ANCHOR.CENTER_BOTTOM,
                    imageUrl: textureTarget.url!,
                    background: '#000000',
                    fontSize: 40,
                    width: 1,
                    height: 1,
                    top: 0.01,
                    cornerRadius: 5,
                    alpha: 1,
                    renderingGroupId: RenderOrder.id(Data.orders.ui),
                }, () => {
                    CharacterManager.uav.recordTarget();
                    ShellManager.setInitialData();
                }),
                this.aimButton = CreateUIButton('control-panel-aim-button', stage.mainScene, {
                    anchor: ANCHOR.CENTER_BOTTOM,
                    imageUrl: textureExplode.url!,
                    background: '#000000',
                    fontSize: 40,
                    width: 1,
                    height: 1,
                    top: 0.01,
                    cornerRadius: 5,
                    alpha: 1,
                    renderingGroupId: RenderOrder.id(Data.orders.ui),
                    left: 0.11,
                }, () => {
                    CharacterManager.uav.recordExplode();
                    // ShellManager.setRangeData();
                }),
            ]
        );

        this.node = node;
    }

}


export { ControlPanel };